<!DOCTYPE html>
<html lang="zh">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>角色列表</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="../static/ajax/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../static/css/animate.css" rel="stylesheet"/>
    <link href="../static/css/style.css" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../static/js/jconfirm/jquery-confirm.min.css">

</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            角色名称：<input type="text" name="roleName"/>
                        </li>
                        <li>
                            权限字符：<input type="text" name="roleKey"/>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>


        <div class="col-sm-12 select-table table-striped">


            <div class="bootstrap-table">
                <div class="fixed-table-toolbar">
                    <div class="bs-bars pull-left">
                        <div class="btn-group-sm" id="toolbar" role="group">

                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#role_add">
                                <i class="fa fa-plus"></i> 新增
                            </button>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#role_edit">
                                <i class="fa fa-edit"></i> 修改
                            </button>
                        </div>
                    </div>

                </div>
                <div class="fixed-table-container" style="padding-bottom: 0px;">
                    <div class="fixed-table-header" style="display: none;">
                        <table></table>
                    </div>
                    <div class="fixed-table-body">
                        <div class="fixed-table-loading" style="top: 41px; display: none;">正在努力地加载数据中，请稍候……</div>
                        <table id="bootstrap-table" data-mobile-responsive="true" class="table table-hover">
                            <thead>
                            <tr>
                                <th class="bs-checkbox " style="width: 36px; " data-field="0" tabindex="0">
                                    <div class="th-inner "><input name="btSelectAll" type="checkbox"></div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th style="" data-field="roleId" tabindex="0">
                                    <div class="th-inner ">角色编号</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th style="" data-field="roleName" tabindex="0">
                                    <div class="th-inner sortable both">角色名称</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th style="" data-field="roleKey" tabindex="0">
                                    <div class="th-inner sortable both">权限字符</div>
                                    <div class="fht-cell"></div>
                                </th>
                                <th style="" data-field="roleSort" tabindex="0">
                                    <div class="th-inner sortable both asc">描述</div>
                                    <div class="fht-cell"></div>
                                </th>

                                <th style="text-align: center; " data-field="7" tabindex="0">
                                    <div class="th-inner ">操作</div>
                                    <div class="fht-cell"></div>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr data-index="0">
                                <td class="bs-checkbox ">
                                    <input data-index="0" name="btSelectItem" type="checkbox">
                                </td>
                                <td style="">1</td>
                                <td style="">管理员</td>
                                <td style="">admin</td>
                                <td style="">具备对系统管理，同时具备普通管理员的用例和工作人员的功能</td>

                                <td style="text-align: center; ">
                                    <a class="btn btn-success btn-xs role_edit" href="javascript:void(0)" onclick="">
                                        <i class="fa fa-edit"></i>编辑
                                    </a>
                                    <a class="btn btn-danger btn-xs role_delete" href="javascript:void(0)" onclick="">
                                        <i
                                                class="fa fa-remove"></i>删除
                                    </a>
                                </td>
                            </tr>
                            <tr data-index="1">
                                <td class="bs-checkbox ">
                                    <input data-index="1" name="btSelectItem" type="checkbox">
                                </td>
                                <td style="">2</td>
                                <td style="">普通角色</td>
                                <td style="">common</td>
                                <td style="">具备对系统管理，同时具备普通管理员的用例和工作人员的功能</td>

                                <td style="text-align: center; ">
                                    <a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="">
                                        <i class="fa fa-edit"></i>编辑
                                    </a>
                                    <a class="btn btn-danger btn-xs role_delete" href="javascript:void(0)" onclick="">
                                        <i
                                        class="fa fa-remove"></i>删除
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="fixed-table-footer" style="display: none;">
                        <table>
                            <tbody>
                            <tr></tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="fixed-table-pagination" style="display: block;">
                        <div class="pull-left pagination-detail">
                            <span class="pagination-info">第 1 到 2 条，共  2 条记录。</span>
                            <span class="page-list"  style="display: none;">
                                <span class="btn-group dropup">
                                    <button type="button" class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown">
                                        <span class="page-size">10</span>
                                        <span class="caret"></span>
                                    </button>
                            <ul class="dropdown-menu" role="menu">
                                <li class="active">
                                    <a href="javascript:void(0)">10</a>
                                </li>
                            </ul>
                                </span> 条记录每页</span>
                        </div>
                        <div class="pull-right pagination" style="display: none;">
                            <ul class="pagination pagination-outline">
                                <li class="page-pre"><a href="javascript:void(0)">‹</a></li>
                                <li class="page-number active"><a href="javascript:void(0)">1</a></li>
                                <li class="page-next"><a href="javascript:void(0)">›</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>


        </div>


    </div>
</div>



<!--模态框Begin-->
<div class="modal inmodal" id="role_add" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
                </button>
                <i class="fa fa-laptop modal-icon"></i>
                <h4 class="modal-title">角色新增</h4>
                <small class="font-bold">新增角色，添加角色详情。
                </small></div><small class="font-bold">
            <div class="modal-body">
                <div class="form-group">
                    <label>角色名称</label>
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label>权限字符</label>
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label>权限描述</label>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </small></div><small class="font-bold">
    </small>
    </div>
    <small class="font-bold"></small>
</div>



<div class="modal inmodal" id="role_edit" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
                </button>
                <i class="fa fa-laptop modal-icon"></i>
                <h4 class="modal-title">角色权限分配</h4>
                </div>
            <small class="font-bold">
            <div class="modal-body">

                <div class="form-group">
                    <label>角色名称:</label>
                    <select class="form-group">
                        <option value="">所有</option>
                        <option value="0">正常</option>
                        <option value="1">停用</option>
                    </select>
                </div>




            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
            </small>
        </div>
        <small class="font-bold"></small>
    </div>
    <small class="font-bold"></small>
</div>


<!--模态框End-->




<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<!-- bootstrap-table 表格插件 -->
<script src="../static/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../static/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../static/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="../static/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<script src="../static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js"></script>
<script src="../static/ajax/libs/validate/jquery.validate.extend.js"></script>
<!-- jquery-validate 表单树插件 -->
<script src="../static/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<!-- jquery-export 表格导出插件 -->
<script src="../static/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="../static/ajax/libs/bootstrap-table/extensions/export/tableExport.js"></script>
<!-- 遮罩层 -->
<script src="../static/js/jconfirm/jquery-confirm.min.js"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="../static/ajax/libs/iCheck/icheck.min.js"></script>
<script src="../static/ajax/libs/layer/layer.min.js"></script>
<script src="../static/ajax/libs/layui/layui.js"></script>
<script src="../static/ruoyi/js/common.js"></script>
<script src="../static/ruoyi/js/ry-ui.js"></script>
<script> var ctx = "\/"; </script>

<script>

    $(".role_delete").click(function () {
        $.modal.confirm("确认删除该角色信息！", function() {
            $.modal.msg("测试按钮");
        });
    });

    $(".auth_user").click(function () {
        $.modal.msg("测试按钮");
    });




    $('.role_edit').on('click', function () {
        $.confirm({
            title: '编辑',
            content: '' +
                '<form action="" class="formName">' +
                '<div class="form-group">' +
                '<label>角色名称</label>' +
                '<input type="text" class="name form-control" required />' +
                '<label>角色描述</label>' +
                '<input type="text" class="name form-control" required />' +
                '</div>' +
                '</form>',
            buttons: {
                formSubmit: {
                    text: '提交',
                    btnClass: 'btn-blue',
                    action: function () {
                        var name = this.$content.find('.name').val();
                        if(!name){
                            $.alert('请您输入您的口令');
                            return false;
                        }
                        $.alert('您的口令是： ' + name);
                        $("#role-add-modal").modle();
                    }
                },
                cancel: {
                    text: '取消'
                },
            },
            onContentReady: function () {
                var jc = this;
                this.$content.find('form').on('submit', function (e) {
                    e.preventDefault();
                    jc.$$formSubmit.trigger('click');
                });
            }
        });
    });


</script>
</body>
</html>